<template>
  <div class="minw">
    <div class="css left">
      <div class="kuang">
        <div class="tv left">
          <h1>{{ tvList[leftIndex].tvTitle }}</h1>
          <br />
          <h3>{{ tvList[leftIndex].message }}</h3>
        </div>
      </div>
    </div>

    <div class="css right">
      <div class="kuang">
        <div class="tv right">
          <h1>{{ tvList[rightIndex].tvTitle }}</h1>
          <br />
          <h3>{{ tvList[rightIndex].message }}</h3>
        </div>
      </div>
    </div>

    <topNav></topNav>
    <search></search>
    <div class="navBlock">
      <div class="w8 row">
        <template v-for="item in navList">
          <li @click="goto(item.url)" class="hover navList">{{ item.name }}</li>
        </template>
      </div>
    </div>
    <div class="w8">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive" />
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navList: [
        {
          name: "首页",
          url: "home",
        },
        {
          name: "书店",
          url: "issuer",
        },
      ],
      firstBookTypeList: [],
      secondBookTypeList: [],
      allBookTypeList: [],
      findByPage: {
        pageNum: 1,
        pageSize: 6,
      },
      tvList: [],
      leftIndex: 0,
      rightIndex: 1,
    };
  },
  components: {
    topNav: () => import("./topNav.vue"),
    search: () => import("./search.vue"),
  },
  created() {
    // console.log("index mounted!");
    this.getBookTypeList();
    this.getIssuerList();
    this.findAllTV();

    //假设用户小李已经登录
    // this.$store.commit("user/setUserInfo", {
    //   token: "liToken",
    //   userId: "1",
    // });
  },
  methods: {
    goto(url) {
      this.$router.push(url);
    },
    getBookTypeList() {
      this.$axios.get("index/sys/bookType/getAllBookType").then((res) => {
        console.log("getBookTypeList:", res);
        if (res.status == 200) {
          this.firstBookTypeList = JSON.parse(
            JSON.stringify(res.data.FirstBookTypeList)
          );
          this.secondBookTypeList = [...res.data.SecondBookTypeList];
          this.allBookTypeList = JSON.parse(
            JSON.stringify(res.data.FirstBookTypeList)
          );
          for (let i = 0; i < this.firstBookTypeList.length; i++) {
            const more = [];
            this.secondBookTypeList.forEach((item) => {
              if (item.pid == res.data.FirstBookTypeList[i].typeId) {
                more.push(item);
              }
            });
            this.$set(this.allBookTypeList[i], "children", more); //安全
            // this.allBookTypeList[i].children = more;
          }
          // console.log("allBookTypeList:", this.allBookTypeList);
          // console.log("firstBookTypeList:", this.firstBookTypeList);
          // console.log("secondBookTypeList:", this.secondBookTypeList);
          // console.log(
          //   "res.data.FirstBookTypeList:",
          //   res.data.FirstBookTypeList
          // );
          this.$store.commit(
            "bookType/setFirstBookTypeList",
            this.firstBookTypeList
          );
          this.$store.commit(
            "bookType/setSecondBookTypeList",
            this.secondBookTypeList
          );
          this.$store.commit(
            "bookType/setAllBookTypeList",
            this.allBookTypeList
          );

          //修改属性名
          const LabList = JSON.parse(
            JSON.stringify(this.allBookTypeList)
              .replace(/typeName/g, "label")
              .replace(/typeId/g, "value")
          );
          // 提取
          const cascaderList = LabList.map(({ label, value, children }) => {
            return { label, value, children };
          });
          this.$store.commit("bookType/setCascaderList", cascaderList);
        }
      });
    },
    getIssuerList() {
      this.$axios
        .post("index/sys/store/getStoresAllByPage", this.findByPage)
        .then(({ data }) => {
          // console.log("isserList : ", data);
          this.$store.commit("issuerList/setIsserList", data.isserAllList);
        });
    },
    findAllTV() {
      let findTV = {
        userId: 0,
        pageNum: 1,
        pageSize: 100,
      };
      this.$axios
        .post("index/sys/bookTv/getTVsByPage", findTV)
        .then(({ data }) => {
          this.tvList = data.tvList;
          const all = this.tvList.length;
          setInterval(() => {
            this.leftIndex = (this.leftIndex + 2) % all;
            this.rightIndex = (this.rightIndex + 2) % all;
          }, 5000);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.navBlock {
  background: rgb(248, 245, 245);
  .navList {
    font-size: 20px;
    color: rgb(31, 30, 30);
    font-weight: 500;
    line-height: 3;
    margin-right: 50px;
  }
}
.tv {
  margin: 10px;
  min-height: 200px;
}
.right {
  right: 10px;
}
.left {
  left: 10px;
}

// 转动的边框线(两条)
.css {
  position: fixed;
  top: 200px;
  width: 160px;
  --bRadius: 10px;
  .kuang {
    text-align: center;
    font-size: 16px;
    border: 2px solid rgb(179, 191, 231);
    border-radius: var(--bRadius);
    transition: all 0.3s;
    background-color: #eee;
    &::before,
    &::after {
      content: "";
      position: absolute;
      top: -10px;
      left: -10px;
      right: -10px;
      bottom: -10px;
      border: 2px solid rgb(17, 36, 100);
      transition: all 0.5s;
      border-radius: var(--bRadius);
      animation: clippath 3s infinite linear;
    }
    &::after {
      animation: clippath 3s infinite -1.5s linear;
    }
    @keyframes clippath {
      0%,
      100% {
        clip-path: inset(0 0 98% 0);
      }
      25% {
        clip-path: inset(0 98% 0 0);
      }
      50% {
        clip-path: inset(98% 0 0 0);
      }
      75% {
        clip-path: inset(0 0 0 98%);
      }
    }
  }
}
</style>